<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <script src="d3.v4.min.js"></script>
        <script>
        
        const svg = d3.select('body')
        .append('svg')
        .attr('width',960)
        .attr('height',500)
        
        let t = 'abc'
        
        const nodes = d3.range(20)
        .map((d,i)=>{
            return {
                x:Math.random()*(960 - d * 2)+d,
                y:Math.random()*(500 - d * 2)+d,
                d:d
            }
        })

        // console.log(nodes);

        const color = d3.schemeCategory10

        svg.append("g")
        .selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("cx",d=>{
            return d.x
        })
        .attr("cy",d=>{
            return d.y
            })
        .attr("r",d=>{
            return d.d*5
        })
        .attr("fill",(d,i)=>{
            return color[i%10]
        })
        
        svg.append('text')
        .text(t)
        .attr('x',480)
        .attr('y',250)
        .attr('class','text')
        
        
        </script>
</body>
<style>
    .text{
        font-size: 200px;
        opacity: 0.4;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
    }
</style>
</html>